---
title: next13-app-auth-paste-from-root
sortNum: 106
---
### next13-app-auth-paste-from-root
Adds basic auth.js with Github provider, React provider component and exmaple .env file to TS nextjs13 with app router. Must be paste in root folder, where app/ dir is located.
#### Pasted files structure
```bash
├── app
│   └── api
│       └── auth
│           └── [...nextauth]
│               └── route.ts
└── components
    └── AuthProvider.tsx
```
#### Files contents
```auth-template title="./.env.auth-template"
GITHUB_ID=9c7fd0feb8bb492b5082
GITHUB_SECRET=1086b7d5d18b020be74fd00a034a4d19be4380ae
NEXTAUTH_SECRET=LUIt4Y+LigEa/rXhJpbLqloJ2pbHUK271WUV5yLAZyI=
```
```ts title="./app/api/auth/[...nextauth]/route.ts"
import NextAuth, { AuthOptions } from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions: AuthOptions = {
    // Configure one or more authentication providers
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID!,
            clientSecret: process.env.GITHUB_SECRET!,
        }),
        // ...add more providers here
    ],
}

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }
```
```tsx title="./components/AuthProvider.tsx"
'use client'

import { SessionProvider } from "next-auth/react";

export default function Providers({ children }: { children: React.ReactNode }) {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    )
}
```